<template>
	<!-- 封装的input输入框 -->
	<div class="fInput flexaic" :id="inputID">
		<!-- 输入框前边的图标 -->
		<div class="iconfont beforeicon" :class="beforeicon" v-if="beforeicon"></div>
		<!-- 输入框 -->
		<input @input="change" @confirm='change' class="inputInnner" :maxlength="maxlength" v-model="newvalue"
			:disabled='disabled' :password="password" :type="type" :placeholder="placeholder" />
		<!-- 清空内容图标 -->
		<div @tap.stop="clear" v-if="isclear&&newvalue.length>0" class="iconfont icon-qingkong"></div>
		<!-- 验证码按钮  -->
		<div v-if="inputID==='verifCode'" class="verifbtn flexcent">
			<div @click="sendcode" v-if="codetime===0">
				发送验证码
			</div>
			<div v-else>{{codetime}}s后重发</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'fInput', //封装的input输入框
		props: {
			// 输入框初始内容
			value: {
				type: [String, Number],
			},
			// input 的类型,默认text
			type: {
				type: [String],
				default: 'text'
			},
			// 是否是密码类型	
			password: {
				type: [Boolean],
				default: false
			},
			// 是否禁用
			disabled: {
				type: [Boolean],
				default: false
			},
			// 最大输入长度
			maxlength: {
				type: [Number],
				default: -1
			},
			// 输入框默认输入内容
			placeholder: {
				type: [String],
				default: '请输入'
			},
			// 输入框种类，正则以及一些特殊样式展示
			inputID: {
				type: [String],
				default: 'text'
			},
			// 是否显示清空按钮,默认显示
			isclear: {
				type: [Boolean],
				default: true
			},
			// 输入框左边的内容
			beforeicon: {
				type: [String],
				default: ''
			},
		},
		data() {
			return {
				newvalue: "", //输入框内容
				timeout: null, //定时器
				codetime: 0, //验证码倒计时时间
			}
		},
		watch: {
			// 初始化同步数据 
			value: {
				handler(newName, oldName) {
					this.newvalue = newName || '';
				},
				deep: true,
				immediate: true
			}
		},
		destroyed() {
			// 清除页面定时器内容
			clearInterval(this.timeout)
		},
		methods: {
			// 发送验证码的事件，收到后准备定时器
			sendcode() {
				// 传出发送验证码的方法
				this.$emit("sendcode", this.settime)
			},
			// 启动定时器的函数
			settime() {
				this.isverif = 2
				// 启动定时器
				this.codetime = 60
				this.timeout = setInterval(() => {
					this.codetime--
					if (this.codetime === 0) {
						this.isverif = 1
						clearInterval(this.timeout)
					}
				}, 1000)
			},
			// 数据变化时触发
			change() {
				this.$emit('update:value', this.newvalue)
				// 停止输入后触发(.5s后停止)。
				this.way.debounce(500).then(() => {
					this.$emit("change", this.newvalue)
				});
			},
			// 清空输入框
			clear() {
				this.$emit('clear')
				this.newvalue = ''
				this.change()
			}
		}
	}
</script>

<style lang="less" scoped>
	// 封装的input输入框
	.fInput {
		width: 100%;

		// 输入框前边的图标
		.beforeicon {
			margin: 0 20rpx;
			font-size: 30rpx;
		}

		// 输入框
		.inputInnner {
			flex: 1;
			height: 100%;
			font-size: 28rpx;
		}

		// 清空内容图标
		.icon-qingkong {
			opacity: 0.8;
			font-size: 40rpx;
			margin: 0 10rpx;
			color: #c3c3c3;
		}

		// 验证码按钮
		.verifbtn {
			height: 30rpx;
			padding: 0rpx 15rpx;
			border-left: 1rpx solid #2e60e9;
			font-size: 28rpx;
			color: #2E60E9;

			div {
				width: 140rpx;
				text-align-last: justify;
			}
		}
	}
</style>